<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta charset="utf-8">
        <meta name="renderer" content=webkit>
        <!-- 引入vue -->
        <script src="../js/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="../js/jQyery.js"></script>
        <script src="../js/layer/layer.js"></script>
        <script src="../js/index.js"></script>
        <script src="../js/element/element.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../js/element/element.css">
        <link rel="stylesheet" href="../css/main.css">
      

     
    </head>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <body>
        <div class="login_main" id="app">
            <div class="login_content"  v-cloak>
                <div class="login_contentLeft">
                    <div class="lcl_title">
                        <span>FARMNET</span>
                    </div>
                    <div class="lcl_desc">
                        <span>云端服务|智造未来农场</span>
                    </div>
                </div>
                <div class="login_contentRight">
                    <div class="lcr_title">
                        <div class="title_leftimg">
                            <img src="../img/logo.png">
                        </div>
                        <div class="title_rightdiv" v-on:click.stop="showlangdialog">
                            <img :src="langinfo.img">
                            <span style="margin-left: 0.1rem">{{langinfo.name}}</span>
                            <img src="../img/xl.png" style="margin-left: 0.05rem;">
                        </div>
                    </div>
                    <div class="lcr_desc">
                        <span>手机验证码登录</span>
                        <div class="bottomdiv"></div>
                    </div>
                    <div class="lcr_inputdiv" style="margin-top: 0.5rem">
                        <div class="input-effect">
                            <input class="effect-16" type="text" v-model="mobile" placeholder="">
                            <label>请输入手机号码</label>
                            <span class="focus-border"></span>
                           
                        </div>
                        <span class="codedesc" v-if='showmobiledesc'>{{mobiledesc}}</span>
                     
                    </div>
                    <div class="lcr_inputdiv lcr_inputdivyzm" >
                        <div class="input-effect">
                            <input class="effect-16" type="text" v-model="mobilecode" placeholder="">
                            <label>请输入验证码</label>
                            <span class="focus-border"></span>
                        
                        </div>
                        <span class="sendcodediv" v-on:click.stop="sendcode" v-if="can_send">{{yzmtitle}}</span>
                        <span class="sendcodediv"  v-else style="color: #F56C6C;">{{yzmtitle}}</span>
                        <span class="codedesc" v-if='showcodedesc'>{{codedesc}}</span>
                       
                    </div>
                    <div class="lcr_loginbtn" v-on:click="login">
                        <span>登录</span>
                    </div>
                    <div class="lcr_nexttitle">
                       <span>其它方式</span>
                    </div>
                    <div class="lcr_nextlogin">
                        <div class="nextlogin_div">
                            <img src="../img/jp.png">
                            <div class="nextimg" style="background: #121214">
                                <span>密码</span>
                            </div>
                           
                        </div>
                        <div class="nextlogin_div">
                            <img src="../img/wx.png">
                            <div class="nextimg" style="background: #121214">
                                <span>微信</span>
                            </div>
                        </div>
                        <div class="nextlogin_div">
                            <img src="../img/qq.png">
                            <div class="nextimg" style="background: #121214">
                                <span>QQ</span>
                            </div>
                        </div>
                    </div>


                    <div class="mobile_div">
                        <img src="../img/sj.png">
                        <div class="nextimg" style="background: #121214">
                            <span>手机</span>
                        </div>
                    </div>
                    <div class="changelang" v-if="showlang">
                        <template v-for="item in langlist">
                            <div class="landiv" :class="{choselandiv:item.img===langinfo.img}" v-on:click="chosethis(item)">
                                <img :src="item.img">
                                <span>{{item.name}}</span>
                            </div>
                        </template>
                       
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>
<script>
    var loginvue=new Vue({
        el: '#app',
        data(){
            return {
                yzmtitle:"获取验证码",
                can_send:true,
                sencodetime:60,
                mobile:"",
                mobilecode:"",

                codedesc:'请输入验证码',
                mobiledesc:"请输入手机号码",
                showmobiledesc:false,
                showcodedesc:false,
                showlang:false,
                langlist:[
                    {
                        img:'../img/cn.png',
                        name:'简体中文'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },
                    {
                        img:'../img/fy.png',
                        name:'Français'
                    },
                    {
                        img:'../img/ry.png',
                        name:'日本語'
                    },{
                        img:'../img/dy.png',
                        name:'Deutsch'
                    },{
                        img:'../img/ey.png',
                        name:'русский язык '
                    },{
                        img:'../img/xbyy.png',
                        name:'Español'
                    },{
                        img:'../img/sjy.png',
                        name:'Esperanto'
                    },{
                        img:'../img/ptyy.png',
                        name:'República Portuguesa'
                    },{
                        img:'../img/hy.png',
                        name:'한국어'
                    }

                ],
                langinfo:{
                    img:'../img/cn.png',
                    name:'简体中文'
                }
                
            }
        },
        computed: {
            
        },
        created() {

        },
        mounted(){
            
         
           
        },
        methods:{
            chosethis(item){
                this.langinfo=item
                this.showlang=false;
            },
            showlangdialog(){
                this.showlang=true;
                let _this=this;
                $(document).on("click",function(){
                   
                    _this.showlang=false;
                  
                })
            },
            sendcode(){
                if(!this.can_send){
                    layer.msg("请勿频繁操作")
                    return false;
                }
                this.can_send=false;
                this.yzmtitle="(60S后重新获取)";
                this.sencodetime=60;
                setTimeout(()=>{
                    this.changecodetime();
                },1000)
            },
            changecodetime(){
                if(this.sencodetime==0){
                    this.yzmtitle="再次发送";
                    this.can_send=true;
                    return false;
                }
                this.sencodetime--;
                this.yzmtitle="("+this.sencodetime+"S后重新获取)"
                setTimeout(()=>{
                    this.changecodetime()
                },1000)
            },
            login(){
                if(this.mobile==""){
                    this.showmobiledesc=true
                    
                    
                }
                if(this.mobilecode==""){
                   this.showcodedesc=true
                }
                if(this.showcodedesc || this.showmobiledesc){
                    return false
                }
                // layer.msg("登录成功")

            },
            
           
        }
    })
  
</script>